<template>
  <div class="cluesInfo">
    <div class="duty clearfix">
      <p class="p1" >潜客信息</p>
      <p class="p2" @click="goBase()">潜客管理</p>
    </div>
    <div>
      <!-- 潜客信息 -->
      <FormPanel
        ref="formPanel"
        :list="formList1"
        :cols="3"
        :formType="type"
        labelWidth="90"
        :isSubmitBtn="false"
        style="margin-top: 10px"
      />
    </div>
    <!-- 更多信息 -->
    <!-- <FormPanel
      ref="formPanel3"
      :list="formList3"
      :cols="3"
      :formType="type"
      labelWidth="100"
      :isSubmitBtn="false"
    /> -->
    <!-- 其他信息 -->
    <!-- <FormPanel
      ref="formPanel4"
      :list="formList4"
      :cols="3"
      :formType="type"
      labelWidth="80"
      :isSubmitBtn="false"
    /> -->
    <!-- 其他信息 -->
    <!-- <FormPanel
      ref="formPanel2"
      :list="formList2"
      :cols="3"
      :formType="type"
      labelWidth="80"
      :isSubmitBtn="false"
    /> -->
      <!-- 意向车型 -->
      <BreakSpace label="意向车型"/>
      <FilterTable
        ref="table"
        :columns="columns1"
        height="auto"
        :dataSource="intentDTOList"
        :isPagination='false'
        :isSelectColumn='false'
        selectionType="single"
        :onRowSelectChange="selectChangeHandle"
        :onColumnsChange="columns1 => this.columns1 = columns1"
      ></FilterTable>
      <!-- 备用联系人 -->
      <BreakSpace label="联系人信息"/>
      <FilterTable
        ref="table"
        :columns="columns2"
        height="auto"
        :dataSource="customerContactinfoDTOList"
        :isPagination='false'
        :isSelectColumn='false'
        selectionType="single"
        :onColumnsChange="columns2 => this.columns2 = columns2"
      ></FilterTable>
      <!-- 竞品车型 -->
      <BreakSpace label="竞品车型"/>
      <FilterTable
        ref="table"
        :columns="columns3"
        height="auto"
        :dataSource="competitorDTOList"
        :isPagination='false'
        :isSelectColumn='false'
        selectionType="single"
        :onColumnsChange="columns3 => this.columns3 = columns3"
      ></FilterTable>
      <!-- 保有车辆 -->
      <BreakSpace label="保有车辆"/>
      <FilterTable
        ref="tableC"
        :columns="columns4"
        height="auto"
        :dataSource="keepingVehiclesDTOList"
        :isPagination='false'
        :isSelectColumn='false'
        selectionType="single"
        :onColumnsChange="columns4 => this.columns4 = columns4"
      >
      </FilterTable>

  </div>
</template>

<script>
import {
  queryPotenCusManage,
  getPotenCusById,
  getCarBuyingFactor,
  getAllHeatUp
} from '@/api/potenCus/customer/potenCusManage';
import { getDataType } from '@/assets/js/auth';
import { dictionary } from '@/utils/dictMixin';
import { formatDates, formatDuring, formatDat } from '@/utils/validate';
import Cookies from 'js-cookie';
export default {
  name: 'cluesInfo',
  mixins: [dictionary],
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      dataType : getDataType('dataType'),
      intentDTOList:[],  //意向车型
      customerContactinfoDTOList:[],  //联系人
      competitorDTOList:[],    //竞品车型
      keepingVehiclesDTOList:[],    //保有车辆
      formList1: this.createFormList1(),
      form2Show: false,
      // formList2: this.createFormList2(),
      // formList3: this.createFormList3(),
      // formList4: this.createFormList4(),
      columns1: this.createTableColumns1(),
      columns2: this.createTableColumns2(),
      columns3: this.createTableColumns3(),
      columns4: this.createTableColumns4(),
      // handleType: '',
      formData: {},
      // conf: { show: '明细' },
      // actived: 2,
      type: 'show',
      isShop: false,
      isDrive: false,
      isSubscription: false,
      isDelivery: false,
      isDefeated: false,
    };
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      console.log('this.type',this.type)
      console.log('this.rowData21212',this.rowData)
      if (this.type === 'show') {
        // 更新接口需要的记录 ID
        this.potentialCustomersId = this.rowData.costomerBusinessId
        this.clueType = this.rowData.clueType
        this.actionStatus = this.rowData.actionStatus
        this.clueStatus = this.rowData.clueStatus
        if (this.potentialCustomersId) {
          this.getPotenCusList()
        }
        this.getBuyCarList()
      }
      this.isShowData();
      this.getAllHeatUp();
    },
    async getBuyCarList() {
      const res = await getCarBuyingFactor();
      console.log('购车因素', res)
      if (res.resultCode === 200) {
        this.formList1.find(item =>item.fieldName ==='buyCarFactorList').itemList = res.data.map(x => ({ value: x.basedataId, text: x.basedataName }));
        // TODO
        this.columns3.find(item => item.dataIndex ==='competitorList').filterItems =  res.data.map(x => ({ value: x.basedataId, text: x.basedataName }));
      }
    },
    selectChangeHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },
    // 潜客信息
    createFormList1() {
      return [
        {
          type: 'SELECT',
          label: '来源渠道',
          fieldName: 'clueSourceName',
          placeholder: '',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '来源备注',
          fieldName: 'clueSourceRemark',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '潜客热度',
          fieldName: 'temperature',
          placeholder: '',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '意向级别',
          fieldName: 'intentLevel',
          placeholder: '',
          itemList: this.createDictList('1519'),
        },
        {
          type: 'DATE',
          label: '预购日期',
          fieldName: 'bookingDate',
          dateType: 'exactdate',
          placeholder: '',
        },
        {
          type: 'DATE',
          label: '期望用车日期',
          fieldName: 'expectedCarDate',
          dateType: 'exactdate',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '潜客类型',
          fieldName: 'clueEnterType',
          placeholder: '',
          itemList: this.createDictList('7019'),
        },
        {
          type: 'SELECT',
          label: '购买类型',
          fieldName: 'buyType',
          placeholder: '',
          itemList: this.createDictList('7015'),
        },
        {
          type: 'SELECT',
          label: '业务分类',
          fieldName: 'businessClassify',
          placeholder: '',
          itemList: this.createDictList('7056'),
        },
        {
          type: 'SELECT',
          label: '付款方式',
          fieldName: 'paymentMethod',
          placeholder: '',
          itemList: this.createDictList('1426'),
        },
        {
          type: 'MULTIPLE_CHECKBOX',
          label: '商机分析',
          fieldName: 'businessAnaly',
          placeholder: '请选择',
          selfCols: 4,
          itemList: [
            {value: 70431001, text: '邀约进店'},
            {value: 70431002, text: '建立关系'},
            {value: 70431003, text: '需求分析'},
            {value: 70431004, text: '产品介绍'},
            {value: 70431005, text: '试乘试驾'},
            {value: 70431006, text: '异议处理'},
            {value: 70431007, text: '价格商谈'},
            {value: 70431008, text: '定金订单'}
          ],
        },
        {
          type: 'INPUT_NUMBER',
          label: '购买台次',
          fieldName: 'buyNum',
          placeholder: '',
        },
        {
          type: 'MULTIPLE_SELECT',
          label: '购车因素',
          fieldName: 'buyCarFactorList',
          placeholder: '',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '购车用途',
          fieldName: 'buyCarUse',
          placeholder: '',
          itemList: this.createDictList('1511'),
        },
        {
          type: 'SELECT',
          label: '购车预算',
          fieldName: 'carBudget',
          placeholder: '',
          itemList: this.createDictList('7057'),
        },
        {
          type: 'INPUT',
          label: '置换信息',
          fieldName: 'displacementInfo',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '了解途径',
          fieldName: 'waysToRoadName',
          placeholder: '',
          itemList: [],
        },
        {
          type: 'INPUT',
          label: '是否进店',
          fieldName: 'shop',
          placeholder: '',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '进店次数',
          fieldName: 'shopNumber',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '进店类型',
          fieldName: 'shopTime',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '是否试驾',
          fieldName: 'testDrive',
          placeholder: '',
        },
      ]
    },
    // 意向车型
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '意向品牌',
          dataIndex: 'intentBrandName',
          width: 200,
          filterType: 'input'
        },
        {
          title: '意向车系',
          dataIndex: 'intentSeriesName',
          filterType: 'input'
        },
        {
          title: '意向车型',
          dataIndex: 'intentModelName',
          filterType: 'input'
        },
        {
          title: '意向配置',
          dataIndex: 'intentPackageName',
          filterType: 'input',
          width: 150
        },
        {
          title: '意向颜色',
          dataIndex: 'intentColorName',
          filterType: 'input',
        },
        {
          title: '购买备注',
          dataIndex: 'remark',
          filterType: 'input'
        },
      ];
    },
    // 备用联系人
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '联系人姓名',
          dataIndex: 'contactName',
          filterType: 'input'
        },
        {
          title: '性别',
          dataIndex: 'gender',
          filterType: 'checkbox',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span>{this.createDictText(props.row.gender, '1002')}</span>;
          }
        },
        {
          title: '联系人手机',
          dataIndex: 'contactorPhone',
          filterType: 'input'
        },
        {
          title: '联系人类型',
          dataIndex: 'contactType',
          filterType: 'checkbox',
          filterItems: this.createDictList('7034'),
          render: props => {
            return <span>{this.createDictText(props.row.contactType, '7034')}</span>;
          }
        },
        {
          title: '关系',
          dataIndex: 'contactRelation',
          filterType: 'checkbox',
          filterItems: this.createDictList('1534'),
          render: props => {
            return <span>{this.createDictText(props.row.contactRelation, '1534')}</span>;
          }
        },
        {
          title: '备注',
          dataIndex: 'contactRemark',
          filterType: 'input'
        },
      ];
    },
    // 竞品车型
    createTableColumns3() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '竞争品牌',
          dataIndex: 'failBrand',
          filterType: 'input'
        },
        {
          title: '竞争车型',
          dataIndex: 'failSeries',
          filterType: 'input'
        },
        {
          title: '竞品关注点',
          dataIndex: 'competitorList',
          initialValue: '',
          filterType: 'input',
          // filterItems: [],
        },
        {
          title: '备注',
          dataIndex: 'competitorRemark',
          filterType: 'input'
        },
      ];
    },
    // 保有
    createTableColumns4() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '品牌',
          dataIndex: 'keepVehiclesBrand',
          filterType: 'input',
          filterItems: [],
        },
        {
          title: '车系',
          dataIndex: 'keepVehiclesSeries',
          filterType: 'input',
          filterItems: [],
        },
        {
          title: '车型',
          dataIndex: 'keepVehiclesModel',
          filterType: 'input',
          filterItems: [],
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 180,
          filterType: 'input',
        },
        {
          title: '购买日期',
          dataIndex: 'buyDate',
          dateType: 'exactdate',
          width: 160,
          initialValue:"",
          filterType: 'input',
          render: props => {
            return <span>{ formatDat(props.row.buyDate) }</span>;
          }
        },
        {
          title: '购买车龄(天)',
          dataIndex: 'boughtCarsAge',
          filterType: 'input',
          render: props => {
            return <span>{ props.row.boughtCarsAge }</span>
          }
        },
        {
          title: '行驶里程(km)',
          dataIndex: 'drivingMileage',
          filterType: 'input',
        },
        {
          title: '备注',
          dataIndex: 'keepingRemark',
          filterType: 'input',
        },
      ];
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    isShowData() {
      const dataType = getDataType('dataType')
      if(this.dataType != 10461001){
        this.form2Show = true
      } else {
        this.form2Show = false
      }
    },
    // 获取编辑明细
    async getPotenCusList() {
      const res = await getPotenCusById(this.potentialCustomersId,this.clueType);
      console.log('线索明细', res);
      if (res.resultCode === 200) {
        this.formList1.forEach(x => {
          x.initialValue = res.data[x.fieldName];
        });
        this.formList1.find(item => item.fieldName === 'businessAnaly')['initialValue'] = res.data['businessAnaly'] ? res.data['businessAnaly'].split(',').map(x => parseInt(x)) : [];
        // this.formList1.find(x => x.fieldName === 'clueSourceName').initialValue = res.data.clueSourceName;
        this.formList1.find(x => x.fieldName === 'bookingDate').initialValue = formatDates(res.data.bookingDate);
        this.formList1.find(x => x.fieldName === 'expectedCarDate').initialValue = formatDates(res.data.expectedCarDate);

        this.formList1.find(x => x.fieldName === 'buyCarFactorList').initialValue=[]
        res.data.buyCarFactorList.map(x=>{
            this.formList1.find(x => x.fieldName === 'buyCarFactorList').initialValue.push(x.basedataId)
        })
        this.formList1.find(x => x.fieldName === 'shop').initialValue = (this.formList1.find(x => x.fieldName === 'shop').initialValue ? '是':'否');
        this.formList1.find(x => x.fieldName === 'testDrive').initialValue = (this.formList1.find(x => x.fieldName === 'testDrive').initialValue ? '是':'否');
        // 意向
        if(res.data.clueIntentDTOList.length){
          this.intentDTOList = res.data.clueIntentDTOList
          this.intentDTOList.forEach(item=>{
            item['intentBrand'] = item.intentBrandId
            item['intentSeries'] = item.intentSeriesId
            item['intentModel']= item.intentModelId
            item['intentPackage']= item.intentPackageId
            item['intentColor']= item.intentColorId
          })
        }
        // 备用联系人
        if(res.data.customerContactinfoDTO.length){
          this.customerContactinfoDTOList = res.data.customerContactinfoDTO
        }
        // 竞品
        if(res.data.competitors.length){
          this.competitorDTOList = res.data.competitors
          let name =''
          this.competitorDTOList.forEach(item =>{
            item['failBrand'] = item.failBrand
            item['failSeries'] = item.failSeries
            if(item.competitorList){
                item.competitorList.forEach(item =>{
                name += item.basedataName + ','
              })
            }
            // console.log('name ',name)
            item['competitorList'] = name
          })
        }
        // 保有
        if(res.data.keepingVehiclesDTO.length){
          this.keepingVehiclesDTOList = res.data.keepingVehiclesDTO
        }
      }
    },
    async getAllHeatUp() {
      const res = await getAllHeatUp({isValid:10041001});
      console.log('线索热度定义', res)
      if (res.resultCode === 200) {
        this.formList1.find(item => item.fieldName ==='temperature').itemList = res.data.map(x => ({ value: x.id, text: x.clueHeatName }));

      }
    },
    //跳转潜客管理
    goBase(){
      this.$router.push("/potenCus/customer/potenCusManage/index")
      Cookies.set('baseNO', this.rowData.mobilePhone);
      this.$emit('myClallback')
    },
    async openSearch() {
      // this.handleType = '点击搜索经销商代码';
      alert('点击搜索经销商代码')
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },

  }
};
</script>

<style lang="less" scoped>
.cluesInfo{
  .duty{
      line-height: 40px;
      background: #E2E8F3;
      padding-left: 10px;
      padding-right: 30px;
      margin-bottom: 20px;
      .p1{
        float: left;
      }
      .p2{
        float: right;
        cursor: pointer;
      }
  }
}
</style>

